<!--
 * @Description: 用户管理
 * @FilePath: \hk-computerRoom-Security\src\views\system\user\index.vue
 * @Date: 2024-01-03 09:41:17
 * @LastEditTime: 2024-01-18 10:15:09
-->

<template>
	<div class="system-user-container layout-padding">
		<div class="layout-padding-auto card-bg">
			<div class="system-user-search energy-from">
				<el-input v-model="state.tableData.param.username" placeholder="请输入用户名" style="max-width: 180px; margin-left: 5px" clearable />
				<el-input v-model="state.tableData.param.phoneNumber" placeholder="请输入手机号" style="max-width: 180px; margin-left: 5px" clearable />

				<el-form-item>
					<div class="btn2 ml20" @click="getAllUserInfo()">
						<el-icon> <ele-Search /> </el-icon><span class="ml6">查询</span>
					</div>
					<div class="btn1 ml10" @click="onOpenAddUser()">
						<el-icon> <ele-Plus /> </el-icon><span class="ml6">新增</span>
					</div>
				</el-form-item>
			</div>
			<div class="energy-table">
				<el-table
					:data="state.tableData.data"
					style="width: 100%"
					:cell-style="{ textAlign: 'center' }"
					:row-style="{ background: '#0F2C6A' }"
					:header-cell-style="{ background: '#1E4897', color: '#499AFD', textAlign: 'center' }"
					size="default"
				>
					<el-table-column align="center" type="index" label="序号" width="80" />
					<el-table-column align="center" prop="nickName" label="昵称" />
					<el-table-column align="center" prop="username" label="用户名" />
					<el-table-column align="center" prop="sex" label="性别">
						<template #default="scope">
							<div>
								{{ scope.row.sex == 1 ? '男' : '女' }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="phoneNumber" label="手机号码"></el-table-column>
					<el-table-column align="center" prop="userType" label="用户类型">
						<template #default="scope">
							<div :class="scope.row.userType == 0 ? 'energy-tag1' : 'energy-tag2'">
								<el-tag size="default">{{ scope.row.userType == 0 ? '管理员' : '普通用户' }}</el-tag>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="status" label="用户状态">
						<template #default="scope">
							<el-switch
								v-model="scope.row.status"
								size="default"
								:active-value="0"
								:inactive-value="1"
								active-text="启用"
								inactive-text="禁用"
								inline-prompt
								style="--el-switch-on-color: #13ce66"
								@change="changeStatus(scope.row)"
							/>
						</template>
					</el-table-column>
					<el-table-column align="center" label="关联信息" width="260">
						<template #default="scope">
							<el-button size="small" link type="primary" @click="onOpenAssignRole(scope.row, false)">查看权限</el-button>
							<el-button size="small" link type="success" @click="onOpenAssignRole(scope.row, true)">分配角色</el-button>
							<el-button size="small" link type="success" @click="onOpenAssignDeptPost(scope.row)">分配岗位</el-button>
						</template>
					</el-table-column>
					<!-- <el-table-column align="center" label="密码设置" width="180">
						<template #default="scope">
							<el-button size="small" link type="success">修改密码</el-button>
							<el-button size="small" link type="warning" @click="onResetPwd(scope.row)">重置密码</el-button>
						</template>
					</el-table-column> -->
					<el-table-column align="center" label="操作" fix="right" width="240">
						<template #default="scope">
							<el-button size="small" link type="warning" @click="onResetPwd(scope.row)">重置密码</el-button>
							<el-button size="small" link type="success" @click="onOpenAddUser(scope.row)">修改</el-button>
							<el-button size="small" link type="danger" @click="onRowDel(scope.row)" :disabled="scope.row.type == 0">删除</el-button>
						</template>
					</el-table-column>
					<template #empty>
						<NoData></NoData>
					</template>
				</el-table>
			</div>
			<div class="current-page">
				<el-pagination
					@size-change="onHandleSizeChange"
					@current-change="onHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[1, 5, 10, 15, 20]"
					v-model:current-page="state.tableData.param.pageNum"
					background
					v-model:page-size="state.tableData.param.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="state.tableData.total"
				>
				</el-pagination>
			</div>
		</div>
		<!-- 新增/修改 -->
		<AddDialog ref="userDialogRef" @refresh="getAllUserInfo()" />
		<!-- 用户详情/分配角色 -->
		<AssignRolesDialog ref="assignRolesDialogRef" @refresh="getAllUserInfo()" />
		<!-- 分配部门+岗位 -->
		<AssignDeptPost ref="assignDeptPostRef" @refresh="getAllUserInfo()"></AssignDeptPost>
	</div>
</template>

<script setup lang="ts" name="systemUser">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import { useUserApi } from '/@/api/user/index';

// 引入组件
const AddDialog = defineAsyncComponent(() => import('/@/views/system/user/addDialog.vue'));
const AssignRolesDialog = defineAsyncComponent(() => import('/@/views/system/user/assignRolesDialog.vue'));
const AssignDeptPost = defineAsyncComponent(() => import('/@/views/system/user/assignDeptPost.vue'));
// const FilterUserTableDialog = defineAsyncComponent(() => import('/@/views/system/user/filterUserTableDialog.vue'));

// 定义变量内容
const userDialogRef = ref();
const assignRolesDialogRef = ref();
const assignDeptPostRef = ref();
// const filterUserTableDialogRef = ref();

const state: any = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 20,
			username: '',
			phoneNumber: '',
		},
	},
});

// 获取用户信息
const getAllUserInfo = async () => {
	state.tableData.loading = true;
	const { data } = await useUserApi().getAllUserInfo(state.tableData.param);
	state.tableData.data = data.records;
	state.tableData.total = data.total;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 200);
};

// 打开查看/分配用户角色
const onOpenAssignRole = (row: any, isAssign: Boolean) => {
	assignRolesDialogRef.value.openDialog(row, isAssign);
};

// 打开新增/编辑用户弹窗
const onOpenAddUser = (row?: any) => {
	userDialogRef.value.openDialog(row);
};

// 打开分配部门/岗位弹框
const onOpenAssignDeptPost = (row: any) => {
	assignDeptPostRef.value.openDialog(row);
};

// 修改用户状态
const changeStatus = async (row: any) => {
	const data = await useUserApi().updateUser({
		id: row.id,
		nickName: row.nickName,
		passWord: row.passWord,
		status: row.status,
		sex: row.sex,
		phoneNumber: row.phoneNumber,
	});
	if (data.code == 200) {
		ElNotification({
			title: '提示',
			message: '用户状态修改成功',
			position: 'top-right',
			type: 'success',
		});
		getAllUserInfo();
	}
};

// 删除用户
const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除用户：“${row.username}”，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			const data = await useUserApi().delUserById({ id: row.id });
			if (data.code == 200) {
				ElNotification({
					title: '提示',
					message: '删除用户信息成功',
					position: 'top-right',
					type: 'success',
				});
				getAllUserInfo();
			}
		})
		.catch(() => {});
};

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getAllUserInfo();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getAllUserInfo();
};

// 重置密码
const onResetPwd = (row: any) => {
	ElMessageBox.confirm(`此操作将重置用户"${row.username}"的密码，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let res = await useUserApi().updateUserPwd({ userId: row.id });
			if (res.code === 200) {
				ElMessage({
					type: 'success',
					message: '重置成功',
				});
			} else {
				ElMessage({
					type: 'info',
					message: res.msg,
				});
			}
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消操作',
			});
		});
};

// 页面加载时
onMounted(() => {
	getAllUserInfo();
});
</script>

<style scoped lang="scss">
.system-user-container {
	.card-bg {
		padding: 10px;

		.el-table {
			flex: 1;
			background: #0f2c6a;
		}
	}

	.system-user-search {
		display: flex;
	}
}
</style>
